import React, { Component } from 'react'
import './index.css'

export default class Child extends Component {
  // #2 子组件调用传递过来的函数，调用的同时并传递数据
  handleClick = () => {
    // id、price
    // 1 ~ 3
    // Math.random() * 3 => [0 ~ 3)
    // Math.random() * 3 + 1 => [1 ~ 4)
    // Math.floor(Math.random() * 3 + 1) => [1 ~ 3]
    const price = Math.floor(Math.random() * 3 + 1)
    this.props.changePrice(this.props.id, price)
  }
  render() {
    const { name, price, info, changePrice, id } = this.props
    return (
      <div className='child'>
        <h3 className='title'>标题：{name}</h3>
        <p className='price'>价格：{price}</p>
        <p className='product'>{info}</p>
        {/* <button onClick={() => changePrice()}>砍一刀</button> */}
        {/* <button onClick={() => this.handleClick(id)}>砍一刀</button> */}
        <button onClick={this.handleClick}>砍一刀</button>
      </div>
    )
  }
}
